<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="search">
                        <el-input v-model="formInline.user" placeholder="请输入题目"></el-input>
                    </el-form-item>
                    <el-form-item class="search">
                        <el-select clearable v-model="formInline.region" placeholder="请选择状态">
                            <el-option label="启用" value="shanghai"></el-option>
                            <el-option label="禁用" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="search">
                        <el-button type="primary" size="small">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="7">
                <el-tree
                        :data="data"
                        :props="defaultProps"
                        highlight-current
                        accordion
                >
                </el-tree>
            </el-col>
            <el-col :span="17">
                <!-- <el-upload
                  v-show="false"
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="handlePreview">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload> -->
                <el-row style="margin-bottom: 10px">
                    <el-col>
                        <el-button type="primary" size="small" @click="study">学习</el-button>
                    </el-col>
                </el-row>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%; font-size: 12px"
                        border
                        @current-change="handleCurrentChange"
                        :row-style="currentStyle"
                        :row-class-name="tableRowClassName"
                        @row-click="rowClick"
                >
                    <el-table-column
                            prop="question_type"
                            label="题 型"
                            header-align="center"
                            align="center"
                            :formatter="questionType"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="题 目"
                            header-align="center"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="question_type"
                            label="选 项"
                            header-align="center"
                            align="center"
                            resizable
                            :formatter="questionSelect"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="title_detail"
                            label="题目说明"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="realname"
                            label="创建人"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="org_name"
                            label="所属组织"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            prop="create_time"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            label="更新时间"
                            prop="update_time"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            align="center"
                            :formatter="statusText"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        @current-change="changeCurrent"
                        @size-change="changePageSize"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <viewDialog
                v-if="questionShow"
                :questionShow="questionShow"
                :questionData="questionData"
                :isEdit="true"
                :isShow="false"
                @getDialogStatus="getDialogStatus"
        ></viewDialog>
    </div>
</template>

<script>
    export default {
        name: "study",
        components: {
            viewDialog: resolve => {
                require(["./questionDialog.vue"], resolve);
            }
        },
        data() {
            return {
                questionShow: false,
                formInline: {},
                data: [{
                    label: '科研',
                    children: [
                        {label: '实验类'},
                        {label: '学术类'}
                    ]
                }, {
                    label: '教学'
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                pagination: {
                    pageSize: 10,
                    total: 1,
                    pageNo: 1
                },
                tableData: [
                    {
                        audit_status: 0,
                        create_time: "2020-06-02 15:59:41",
                        id: 12,
                        industry_id: 20129,
                        list: [{id: 9, content: "基础建设"}, {id: 10, content: "智能制造"}, {id: 11, content: "科技应用"}],
                        org_name: "同济大学",
                        question_type: 2,
                        realname: "admin",
                        status: 0,
                        title: "已完成的指标包括。",
                    },
                    {
                        audit_status: 0,
                        create_time: "2020-06-02 15:58:54",
                        id: 11,
                        industry_id: 20129,
                        list: [{id: 6, content: "10%"}, {id: 7, content: "20%"}, {id: 8, content: "30%"}],
                        org_name: "同济大学",
                        question_type: 1,
                        realname: "admin",
                        status: 0,
                        title: "今年的年化目标是"
                    }
                ],
                questionData: {
                    firstPage: true,
                    lastPage: true,
                    pageNumber: 1,
                    pageSize: 10,
                    totalPage: 1,
                    totalRow: 3,
                    list: [
                        {
                            dataId: 1,
                            i: 1,
                            in_name: "科研题",
                            questionType: 0,
                            title: "细胞组织的横截面",
                            tradeId: 20125
                        },
                        {
                            dataId: 2,
                            i: 2,
                            in_name: "科研题",
                            questionType: 0,
                            title: "低温冰箱注意事项",
                            tradeId: 20125
                        },
                        {
                            dataId: 3,
                            i: 3,
                            in_name: "高速切割机注意事项",
                            questionType: 0,
                            title: "3",
                            tradeId: 20125
                        }
                    ]
                }
            }
        },
        methods: {
            getDialogStatus() {
                this.questionShow = false;
            },
            study() {
                this.questionShow = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-pagination {
        text-align: right;
        margin-top: 10px;
    }
</style>
